<template>
    <div>
        <el-menu router="" collapse-transition unique-opened :default-active="$router.path" background-color="#304156"
            text-color="#fff" class="el-menu-vertical-demo">
            <template v-for="(item, index) in list">
                <el-submenu :index="item.path" v-if="item.children.length !== 0" :key="index">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{ item.name }}</span>
                    </template>
                    <menu-list v-on="$listeners" :list="item.children"></menu-list>
                </el-submenu>
                <el-menu-item @click="handleOpen(item)" :index="item.path" v-else :key="index">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>
<script>
export default {
    name: 'MenuList',
    props: {
        list: Array,
        isCollapse: Boolean,
    },
    methods: {
        handleOpen(tab) {
            this.$store.commit('setTab', tab)
            this.$emit('CloseDrawer',{drawer:false})
        },
    }
}
</script>
<style></style>